<html><head><meta charset="utf-8"><title>18 类型别名和字面量类型—单调的类型-慕课专栏</title>
			<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
			<meta name="renderer" content="webkit">
			<meta property="qc:admins" content="77103107776157736375">
			<meta property="wb:webmaster" content="c4f857219bfae3cb">
			<meta http-equiv="Access-Control-Allow-Origin" content="*">
			<meta http-equiv="Cache-Control" content="no-transform ">
			<meta http-equiv="Cache-Control" content="no-siteapp">
			<link rel="apple-touch-icon" sizes="76x76" href="https://www.imooc.com/static/img/common/touch-icon-ipad.png">
			<link rel="apple-touch-icon" sizes="120x120" href="https://www.imooc.com/static/img/common/touch-icon-iphone-retina.png">
			<link rel="apple-touch-icon" sizes="152x152" href="https://www.imooc.com/static/img/common/touch-icon-ipad-retina.png">
			<link href="https://moco.imooc.com/captcha/style/captcha.min.css" rel="stylesheet">
			<link rel="stylesheet" href="https://www.imooc.com/static/moco/v1.0/dist/css/moco.min.css?t=201907021539" type="text/css">
			<link rel="stylesheet" href="https://www.imooc.com/static/lib/swiper/swiper-3.4.2.min.css?t=201907021539">
			<link rel="stylesheet" href="https://static.mukewang.com/static/css/??base.css,common/common-less.css?t=2.5,column/zhuanlanChapter-less.css?t=2.5,course/inc/course_tipoff-less.css?t=2.5?v=201907051055" type="text/css">
			<link charset="utf-8" rel="stylesheet" href="https://www.imooc.com/static/lib/ueditor/themes/imooc/css/ueditor.css?v=201907021539"><link rel="stylesheet" href="https://www.imooc.com/static/lib/baiduShare/api/css/share_style0_16.css?v=6aba13f0.css"></head>
			<body><div id="main">

<div class="container clearfix" id="top" style="display: block; width: 1134px;">
    
    <div class="center_con js-center_con l" style="width: 1134px;">
        <div class="article-con">
                            <!-- 买过的阅读 -->
                <div class="map">
                    <a href="/read" target="_blank"><i class="imv2-feather-o"></i></a>
                    <a href="/read/35" target="_blank">零基础学透 TypeScript</a>
                    <a href="" target="_blank">
                        <span>
                            / 3-5 18 类型别名和字面量类型—单调的类型
                        </span>
                    </a>
                </div>

            


            <div class="art-title" style="margin-top: 0px;">
                18 类型别名和字面量类型—单调的类型
            </div>
            <div class="art-info">
                
                <span>
                    更新时间：2019-06-25 17:21:46
                </span>
            </div>
            <div class="art-top">
                                <img src="https://img4.mukewang.com/5d0b63a90001429606400359.jpg" alt="">
                                                <div class="famous-word-box">
                    <img src="https://www.imooc.com/static/img/column/bg-l.png" alt="" class="bg1 bg">
                    <img src="https://www.imooc.com/static/img/column/bg-r.png" alt="" class="bg2 bg">
                    <div class="famous-word">学习从来无捷径，循序渐进登高峰。 <p class="author">—— 高永祚</p></div>
                </div>
                            </div>
            <div class="art-content js-lookimg">
                <div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">本小节我们来学习类型别名和字面量类型。类型别名我们之前在讲泛型的时候接触过，现在来详细学习下。</p>
</div><div class="cl-preview-section"><h3 id="类型别名">3.5.1 类型别名</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">类型别名就是给一种类型起个别的名字，之后只要使用这个类型的地方，都可以用这个名字作为类型代替，但是它只是起了一个名字，并不是创建了一个新类型。这种感觉就像 JS 中对象的赋值，你可以把一个对象赋给一个变量，使用这个对象的地方都可以用这个变量代替，但你并不是创建了一个新对象，而是通过引用来使用这个对象。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们来看下怎么定义类型别名，使用 <code>type</code> 关键字：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">type</span> TypeString <span class="token operator">=</span> <span class="token keyword">string</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> str<span class="token punctuation">:</span> TypeString<span class="token punctuation">;</span>
str <span class="token operator">=</span> <span class="token number">123</span><span class="token punctuation">;</span> <span class="token comment">// error Type '123' is not assignable to type 'string'</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">类型别名也可以使用泛型，来看例子：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">type</span> PositionType<span class="token operator">&lt;</span>T<span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">{</span> x<span class="token punctuation">:</span> T<span class="token punctuation">;</span> y<span class="token punctuation">:</span> T <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> position1<span class="token punctuation">:</span> PositionType<span class="token operator">&lt;</span><span class="token keyword">number</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  x<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
  y<span class="token punctuation">:</span> <span class="token operator">-</span><span class="token number">1</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> position2<span class="token punctuation">:</span> PositionType<span class="token operator">&lt;</span><span class="token keyword">string</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  x<span class="token punctuation">:</span> <span class="token string">"right"</span><span class="token punctuation">,</span>
  y<span class="token punctuation">:</span> <span class="token string">"top"</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">使用类型别名时也可以在属性中引用自己：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">type</span> Child<span class="token operator">&lt;</span>T<span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  current<span class="token punctuation">:</span> T<span class="token punctuation">;</span>
  child<span class="token operator">?</span><span class="token punctuation">:</span> Child<span class="token operator">&lt;</span>T<span class="token operator">&gt;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> ccc<span class="token punctuation">:</span> Child<span class="token operator">&lt;</span><span class="token keyword">string</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  current<span class="token punctuation">:</span> <span class="token string">"first"</span><span class="token punctuation">,</span>
  child<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// error</span>
    current<span class="token punctuation">:</span> <span class="token string">"second"</span><span class="token punctuation">,</span>
    child<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      current<span class="token punctuation">:</span> <span class="token string">"third"</span><span class="token punctuation">,</span>
      child<span class="token punctuation">:</span> <span class="token string">"test"</span> <span class="token comment">// 这个地方不符合type，造成最外层child处报错</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">但是要注意，只可以在对象属性中引用类型别名自己，不能直接使用，比如下面这样是不对的：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">type</span> Child <span class="token operator">=</span> Child<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// error 类型别名“Child”循环引用自身</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">另外要注意，因为类型别名只是为其它类型起了个新名字来引用这个类型，所以当它为接口起别名时，不能使用 <code>extends</code> 和 <code>implements</code> 。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">接口和类型别名有时可以起到同样作用，比如下面这个例子：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">type</span> Alias <span class="token operator">=</span> <span class="token punctuation">{</span>
  num<span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">interface</span> <span class="token class-name">Interface</span> <span class="token punctuation">{</span>
  num<span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">let</span> _alias<span class="token punctuation">:</span> Alias <span class="token operator">=</span> <span class="token punctuation">{</span>
  num<span class="token punctuation">:</span> <span class="token number">123</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> _interface<span class="token punctuation">:</span> Interface <span class="token operator">=</span> <span class="token punctuation">{</span>
  num<span class="token punctuation">:</span> <span class="token number">321</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
_alias <span class="token operator">=</span> _interface<span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">可以看到用类型别名和接口都可以定义一个只包含 num 属性的对象类型，而且类型是兼容的。那么什么时候用类型别名，什么时候用接口呢？可以通过两点来选择：</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">当你定义的类型要用于拓展，即使用 implements 等修饰符时，用接口。</li>
<li style="font-size: 20px; line-height: 38px;">当无法通过接口，并且需要使用联合类型或元组类型，用类型别名。</li>
</ul>
</div><div class="cl-preview-section"><h3 id="字面量类型">3.5.2. 字面量类型</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">字面量类型其实比较基础，但是它又不适合放到基本类型里讲，因为字符串字面量类型和字符串类型其实并不一样，所以接下来我们来学习两种字面量类型。</p>
</div><div class="cl-preview-section"><h4 id="字符串字面量类型" style="font-size: 26px;">(1) 字符串字面量类型</h4>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">字符串字面量类型其实就是字符串常量，与字符串类型不同的是它是具体的值。</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">type</span> Name <span class="token operator">=</span> <span class="token string">"Lison"</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> name1<span class="token punctuation">:</span> Name <span class="token operator">=</span> <span class="token string">"test"</span><span class="token punctuation">;</span> <span class="token comment">// error 不能将类型“"test"”分配给类型“"Lison"”</span>
<span class="token keyword">const</span> name2<span class="token punctuation">:</span> Name <span class="token operator">=</span> <span class="token string">"Lison"</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">你还可以使用联合类型来使用多个字符串：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">type</span> Direction <span class="token operator">=</span> <span class="token string">"north"</span> <span class="token operator">|</span> <span class="token string">"east"</span> <span class="token operator">|</span> <span class="token string">"south"</span> <span class="token operator">|</span> <span class="token string">"west"</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">getDirectionFirstLetter</span><span class="token punctuation">(</span>direction<span class="token punctuation">:</span> Direction<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> direction<span class="token punctuation">.</span><span class="token function">substr</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">getDirectionFirstLetter</span><span class="token punctuation">(</span><span class="token string">"test"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// error 类型“"test"”的参数不能赋给类型“Direction”的参数</span>
<span class="token function">getDirectionFirstLetter</span><span class="token punctuation">(</span><span class="token string">"east"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><h4 id="数字字面量类型" style="font-size: 26px;">(2) 数字字面量类型</h4>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">另一个字面量类型就是数字字面量类型，它和字符串字面量类型差不多，都是指定类型为具体的值。</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">type</span> Age <span class="token operator">=</span> <span class="token number">18</span><span class="token punctuation">;</span>
<span class="token keyword">interface</span> <span class="token class-name">Info</span> <span class="token punctuation">{</span>
  name<span class="token punctuation">:</span> <span class="token keyword">string</span><span class="token punctuation">;</span>
  age<span class="token punctuation">:</span> Age<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> info<span class="token punctuation">:</span> Info <span class="token operator">=</span> <span class="token punctuation">{</span>
  name<span class="token punctuation">:</span> <span class="token string">"Lison"</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">28</span> <span class="token comment">// error 不能将类型“28”分配给类型“18”</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这里补充一个比较经典的逻辑错误，来看例子：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">function</span> <span class="token function">getValue</span><span class="token punctuation">(</span>index<span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">!==</span> <span class="token number">0</span> <span class="token operator">||</span> index <span class="token operator">!==</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// error This condition will always return 'true' since the types '0' and '1' have no overlap</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这个例子中，在判断逻辑处使用了 <code>||</code> 符，当 index !== 0 不成立时，说明 index 就是 0，则不应该再判断 index 是否不等于 1；而如果 index !== 0 成立，那后面的判断也不会再执行；所以这个地方会报错。</p>
</div><div class="cl-preview-section"><h3 id="本节小结">本节小结</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">本小节我们学习了类型别名和字面量类型，类型别名就是给一个类型起个别名，以后我们可以使用类型别名将较为复杂的类型抽离出来，这样任何需要使用这个类型的地方都可以使用这个别名代替；使用类型别名的好处有时和使用变量一样，我们可以将复杂的逻辑判断语句赋给一个变量，然后再进行判断，只需要判断这个变量的true或false即可；我们使用类型别名也可以起到简化代码的作用。我们还学习了两种字面量类型：数字字面量类型和字符串字面量类型，它们都是使用具体的字面量值来作为一种类型，所以我们叫它单调类型。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">下个小节我们将学习可辨识联合类型，我们可以使用可辨识联合并保证每个case都被处理。<br>
<img src="http://img.mukewang.com/5d034344000116c816000380.jpg" alt="图片描述" data-original="http://img.mukewang.com/5d034344000116c816000380.jpg" class="" style="cursor: pointer;"></p>
</div></div>
            </div>
                            <!-- 买过的阅读 -->
                <div class="art-next-prev clearfix">
                                                                        <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/35/article/354">
                                                    <div class="prev l clearfix">
                                <div class="icon l">
                                    <i class="imv2-arrow3_l"></i>
                                </div>
                                <p>
                                    17 使用显式复制断言给TS一个你一定会赋值的承诺
                                </p>
                            </div>
                        </a>
                                                                                            <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/35/article/356">
                                                    <div class="next r clearfix">
                                <p>
                                    19 使用可辨识联合并保证每个case都被处理
                                </p>
                                <div class="icon r">
                                    <i class="imv2-arrow3_r"></i>
                                </div>

                            </div>
                        </a>
                                    </div>
                    </div>
        <div class="comments-con js-comments-con" id="coments_con">     <div class="number">精选留言 <span class="js-number">0</span></div>     <div class="comments">         <div class="input-fake js-showcommentModal">             欢迎在这里发表留言，作者筛选后可公开显示         </div>                      <div class="noData">                 <p>                     <i class="imv2-error_c"></i>                 </p>                 <p>目前暂无任何讨论</p>             </div>              </div>  </div>



    </div>
    
    
    

</div>
 
<!-- 专栏介绍页专栏评价 -->

<!-- 专栏介绍页底部三条评价 -->

<!-- 专栏阅读页弹层目录和介绍页页面目录 -->

<!-- 专栏阅读页发布回复 -->

<!-- 专栏阅读页发布评论 -->

<!-- 专栏阅读页底部评论 -->

<!-- 专栏阅读 单个 评论 -->

<!-- 新增回复和展开三条以外回复 -->

<!-- 立即订阅的弹窗 -->












</div></body></html>